<template>
<div class="outer">
<div
class="bottomBg"
:style="{
    backgroundImage: `url(${require('@/assets/bottomBg.jpeg')})`,
}"
></div>
<div class="scrollContainer">
<div class="bottomSlide"></div>
</div>
</div>
</template>

<script>
export default {
setup() {
    const a = () => {let b=1;};
},
};
</script>

<style lang="scss" scoped>
.full {
    height: 100vh;
    width: 100vw;
}
.outer {
    @extend .full;
    overflow-y: scroll;
    .bottomBg {
        @extend .full;
        background-color: cyan;
        background-position: center center;
        background-size: cover;
    }
    .scrollContainer {
        position: absolute;
        top: 0;
        @extend .full;
        background-color: transparent;
        overflow: scroll;
        .bottomSlide {
            position: absolute;
            top: 80vh;
            height: 60vh;
            width: 100vw;
            border-top-left-radius: 7vw;
            border-top-right-radius: 7vw;
            background-color: #fff;
        }
    }
}
</style>
